<template>
	<view>
		<swiper class="swiper" indicator-dots circular autoplay :interval="3000" :duration="1000">
			<swiper-item>
				<image class="img"
					src="https://img1.baidu.com/it/u=3404538205,1049538141&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=316"
					mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="img"
					src="https://dingyue.nosdn.127.net/J76nHXdIiPUQCYr5JAjt2Hqg9g4gVSpdFsEJK6CT6WWwe1534095021438compressflag.jpeg"
					mode=""></image>
			</swiper-item>
			<swiper-item>
				<image class="img" src="https://www.bizhizj.com/d/file/2020-06-10/db242b1f0c1e5666fef5e9243ef039c0.jpg"
					mode=""></image>
			</swiper-item>
		</swiper>
		<view class="bgc"></view>
		<view class="classify">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
			<view class="search">
				<u-search shape="round" clearabled></u-search>
				<text class="btn">条件搜索</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<image class="image" src="#" mode=""></image>
			<view class="datail">
				<text>zhang</text>
				<view >
					<text>上海</text> | <text>133.20522</text> <text>硕士</text>
					<view>sdkhfdavbyfu7werds fyew</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getVipList} from '../../api/index.js'
	export default {
		  data() {
		            return {
		                list: [{
		                    name: 'account-fill',
		                    title: '高富帅'
		                    },
		                    {
		                        name: 'server-man',
		                        title: '白富美'
		                    },
		                    {
		                        name: 'man',
		                        title: '才俊'
		                    },
		                    {
		                        name: 'level',
		                        title: '动态'
		                    },
		                    {
		                        name: 'setting',
		                        title: '编辑资料'
		                    },
		                ],
		            }
		        },
		        methods: {
		            click(name) {
		                this.$refs.uToast.success(`点击了第${name}个`)
		            }
		        },
				onShow() {
					getVipList().then(res=>{
						console.log(res);
					})
				}
	}
</script>

<style lang="scss">
	.img {
		width: 100%;
	}
	  .grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
		.bgc{
			background-color: #7f54d8;
			height: 50px;
		}
	
		.classify{
			margin:-25px 10px 10px 10px;
			background-color: #fff;
			border-radius: 5px;
			border-bottom: 1px solid #ccc;	
				.search{
					margin: 0 10px;
					padding: 20px 0;
					display: flex;
				}
				.btn{
					background-color:#83c7eb ;
					padding: 5px;
					border-radius: 5px;
					color: #fff;
				}
		}
		.list{
			display: flex;
			.image{
				width: 100px;
				height: 100px;
				border: 1px solid;
				margin-right: 10px;
			}
			
		}
</style>
